// 封装插件对象, 将来传给Vue.use调用, 给Vue注册全局指令
// 复习Vue.use(), Vue源码会调用你传入对象里install方法并传入Vue构造函数
export default {
  // 固定名字install, 交给Vue.use调用
  install (Vue) {
    // 创建全局自定义指令
    Vue.directive('fofo', {
      // 指令所在标签被"首次"插入到真实DOM时会回调执行, 传回来具体原生DOM标签
      inserted (el) {
        // console.log(el)
        if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
          el.focus()
        } else {
          // JS模拟事件, 获取标签对象.事件名() 公式
          const input = el.querySelector('input')
          setTimeout(() => {
            input.focus()
          })
        }
      },
      update (el) { // 指令所在标签被"更新"时就会触发此函数
        // console.log(el)
        if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
          el.focus()
        } else {
          // JS模拟事件, 获取标签对象.事件名() 公式
          const input = el.querySelector('input')
          input.focus()
        }
      }
    })
  }
}

// 为何v-show控制输入框, 我们自定义指令让他自动聚焦不好用
// 原因: 先解析template标签, 用v-show的标签已经创建并插入到真实DOM, 触发自定义指令
// 标签又被css隐藏了, 所以你想要自动聚焦失败了
// 后续你又让他显示出现了, 但是css方式显示不会触发inserted执行
// 解决: v-if来控制它, v-if移除DOM和插入DOM, 会走inserted方法

// 评论列表为了不让底部挡住我的内容
// 评论列表加一个class类名, 设置padding-bottom
// 但是底部评论列表有2套
// 动态class做不同class类名使用
